import React, {useCallback, useRef, useState} from "react";
import {Dropdown, Layout, Menu} from "antd";
import {getSelectedKeys, IMenuConfig} from "@/common/menu";
import NavHeader from "@/components/layout/NavHeader/NavHeader";
import {renderRoutes} from "react-router-config";
import {BarsOutlined, MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined} from "@ant-design/icons";
import logo from '@/assets/logo.png'
import './index.css'

const {Header, Sider, Footer, Content} = Layout;

const Doc: React.FC = (() => {

  const sideBarRef: any = useRef()
  const [collapsed, setCollapsed] = useState<boolean>(false);

  const onCollapsed = (value: boolean) => {
    setCollapsed(value)
  }

  const redirect = (para: any) => {

  }

  const toggleMenu = useCallback(() => {
    setCollapsed(!collapsed)
  }, [collapsed])

  const renderUserFunc = () => {
    return (
      <div>212</div>
      /* <Menu onClick={this.handleClick}>
         <Menu.Item key="logout" style={{textAlign: "center"}}>
           退出
         </Menu.Item>
       </Menu>*/
    );
  }

  const menus: IMenuConfig[] = [
    {
      name: "实时数据",
      path: `/home`,
      icon: BarsOutlined,
    },
    {
      name: "历史查询",
      path: `/about`,
      icon: BarsOutlined,
    }
  ];

  return (
    <Layout style={{height: "100vh", minWidth: "1080px"}}>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="logo">
          <img src={logo} alt="阿里巴巴" className="logo-img"/>
          <span hidden={collapsed} style={{height: "100%"}}>{"阿里巴巴"}</span>
        </div>
        <Menu
          theme="dark"
          mode="inline"
          // defaultSelectedKeys={['/home']}
          onClick={redirect}
        >
          {/*{this.renderMenu(getMenus())}*/}
        </Menu>
      </Sider>

      <Layout className="site-layout">
        <Layout.Header className="site-layout-background">
          <div className="toggleMenu" onClick={toggleMenu}>
            {collapsed ? (<MenuUnfoldOutlined/>) : (<MenuFoldOutlined/>)}
          </div>
          <div>
            <Dropdown overlay={renderUserFunc}>
              <div>
                <UserOutlined/>
                {"admin"}
              </div>
            </Dropdown>
          </div>
        </Layout.Header>

        <Layout.Content>
          {/*{renderRoutes(subRoutes)}*/}
          <div>122121</div>
        </Layout.Content>
        <Footer style={{textAlign: 'center'}}>Ant Design ©2018 Created by Ant UED</Footer>
      </Layout>
    </Layout>
  )
})

export default Doc;
